<template>
  <div class="page">
    <nav-top title="我的订单">
    </nav-top>
    <div class="header-sub">
      <xl-tab :list="routerList"></xl-tab>
    </div>
    <page-content :inlineStyle="{paddingTop:'2.5rem'}">
    <infinite-scroll @loadNow="loadMore" 
    :loading="loading"
    :done="getDone"
    v-if='orderList'
    >
        <order-item v-for="(item,index) in orderList" :data="item" :key='index'
        @f5='f5'
        ></order-item>
        <div class="row fs30" :key="-1" v-if="!orderList">
          暂无相关订单
        </div>
    </infinite-scroll>
    </page-content>
  </div>
</template>



<script>
import navTop from '@c/header/navTop'
import pageContent from '@c/pagecontent'
import xlContent from '@c/content.vue'
import xlTab from '@c/xlTab'
import orderItem from './orderListItem'
import infiniteScroll from '@c/infiniteScroll'
import {
  getOrderList
} from '../../config/api.js'
export default {
  name: 'orderList',
  components: {
    navTop,
    pageContent,
    xlContent,
    xlTab,
    orderItem,
    infiniteScroll
  },
  data() {
    return {
      loading: false,
      routerList: [{
          routeTo: {
            path: '/order-list/0'
          },
          text: '待付款'
        },
        {
          routeTo: {
            path: '/order-list/1'
          },
          text: '已付款'
        },
        {
          routeTo: {
            path: '/order-list/2'
          },
          text: '全部'
        }
      ],
      listData: [
        // 根据数组索引顺序
        {
          name: 'waitPay',
          data: [],
          page: 0,
          firstGet: true,
          totalCount: null,
          done: false
        },
        {
          name: 'payed',
          data: [],
          page: 0,
          firstGet: true,
          totalCount: null,
          done: false
        },
        {
          name: 'total',
          data: [],
          page: 0,
          firstGet: true,
          totalCount: null,
          done: false
        }
      ]
      // last:[]
    }
  },
  methods: {
    f5() {
      this.resetData()
      this.firstFetch(this, this.$route)
    },
    payBack() {
      this.showPayBack = true
    },
    loadMore() {
      let vm = this
      // console.log(vm)
      var now = vm.currentRoute(vm, vm.$route)
      if (now && now.page > Math.ceil(now.totalCount / 5) - 1) {
        now.done = true
        return
      }
      // 判断是否已经正在加载和是否已经全部加载完毕
      if (vm.loading == false && now && now.done == false) {
        vm.loading = true
        getOrderList(vm, vm.$route, function (res, now) {
          // console.log(now.totalCount)
          vm.loading = false
          let list = res.data.data.itemList
          list.forEach(function (element) {
            // console.log(element.id)
            now.data.push(element)
          }, this);
          now.page += 1
          // console.log(now.page)
        })
      }
    },
    currentRoute(vm, to) {
      return vm.listData[to.params.type]
    },
    // 刷新数据时重置初始数据
    resetData() {
      let now = this.currentRoute(this, this.$route)
      now.firstGet = true
      now.done = false
      now.page = 0
    },
    firstFetch(vm, to) {
      // 首次加载数据
      vm.loading = false
      var now = vm.currentRoute(vm, to)
      // console.log(now.firstGet)
      // 判断是否第一次加载
      if (now.firstGet) {
        getOrderList(vm, to, function (res, now) {
          if (now.totalCount == null) {
            now.totalCount = +res.data.data.totalCount
            // console.log(now.totalCount)
          }
          now.data = now.totalCount > 0 ? res.data.data.itemList : null
          // now.data.forEach(e => console.log(e.id))
          now.firstGet = false
          now.page += 1
        })
      }
    }
  },
  computed: {
    orderList() {
      // 根据路由params切换数据源
      let current = this.$route.params.type
      // console.log(current)
      return current ? this.listData[current].data : null
    },
    getDone() {
      let current = this.$route.params.type
      if (current && this.listData[current].totalCount == 0) {
        // 无数据就不显示了
        return false
      } else if (current) {
        return this.listData[current].done
      }
    }
  },
  beforeRouteEnter: function (to, from, next) {
    console.log('first enter')
    next(vm => {
      if (to.query.id) {
        vm.$store.commit('setUserId', to.query.id)
      }
      // console.log(from.name)
      vm.firstFetch(vm, to)
    })
  },
  beforeRouteUpdate: function (to, from, next) {
    // console.log(from)
    this.firstFetch(this, to)
    next()
  },
  beforeRouteLeave: function (to, from, next) {
    // console.log(from.params.type)
    // this.last=this.listData[from.params.type].data
    next()
  }
}

</script>


<style lang="scss">

</style>